<template>
	<view>
		<uni-nav-bar title="添加群" left-icon="back" @clickLeft="$tab.back()" :statusBar="true" :fixed="true"
			:border="false"></uni-nav-bar>


		<div class="p-24">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false" :showUpFinish="false"
				emptyImage="http://api.fceos.cn/qiliaoyun/profile/appImages/states/img_wudongtai.png" emptyText="暂无群聊">
				<view class="" v-for="(item,index) in list" :key="item.id">
					<view class="flex">
						<image :src="item.groupAvatar" class="round-12" style="width: 94rpx;height: 94rpx;" mode="">
						</image>
						<view class="" style="width: calc(100% - 94rpx);">
							<view class="flex justify-between items-end">
								<view class="ml-20">
									<view class="text-161A0C text-36 font-500">
										{{item.groupName}}
									</view>
									<view class="flex mt-12">
										<view class="chatGroupUserNum px-12 " >
											{{item.groupUserNum}}人
										</view>
									</view>
									<view class=" text-9E9E9E mt-12">
										{{item.createTime}}
									</view>
								</view>
								<view class="jion-group text-FFF text-center"
									@click.stop="confirm(item.id)">
									加入
								</view>
							</view>
							<u-divider></u-divider>
						</view>
					</view>
				</view>
			</s-pull-scroll>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
			};
		},
		onLoad() {
			this.refresh()
		},
		methods: {
			confirm(id) {
				this.$modal.confirm('确认加入该群聊?').then(async con => {
					if (con) {
						const res = await this.$Api.chat.groupChatAddUser(id)
						this.$modal.msg('加入成功!')
						this.refresh()
					}
				})
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}

					const res = await this.$Api.chat.groupChatList({
						pageSize: 20,
						pageNum: pullScroll.page,
					})

					this.list = this.list.concat(res.rows || []);

					if (res.total == 0) {
						pullScroll.empty()
					}

					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
.age {
		width: 72rpx;
		height: 28rpx;
		border-radius: 14rpx;
	}
	
	.chatGroupUserNum{
		height: 40rpx;
		background: #FFDDD2;
		color: #FF561D;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 40rpx;
	}
	
	.jion-group{
		width: 126rpx;
		height: 64rpx;
		background: #FF561D;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 64rpx;
	}
</style>